<template>
  <div class="course-list-home">
    <FilterParam @e-courseList="refreshList" />
    <div class="armsLibrary-wrap webheart">
      <div class="armsLibrary-list">
        <el-row :gutter="20">
          <el-col :span="6">
            <ArmNav />
          </el-col>
          <el-col :span="18">
            <KnowledgeList />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { openApiSysCourseQuery } from '@/api/openApi'
export default {
  components: {
    FilterParam: () => import('../../courseLibrary/courseList/FilterParam.vue'),
    ArmNav: () => import('../../courseLibrary/courseDetail/ClassifyList.vue'),
    KnowledgeList: () =>
      import('../../courseLibrary/courseDetail/KnowledgeList.vue'),
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 12,
        courseType: this.$route.meta.type,
        auditStatus: 2,
        status: 1,
      },
      tableData: [],
      pageObj: {},
      loading: false,
    }
  },
  mounted() {
    // this.getList();
  },
  methods: {
    getList() {
      this.loading = true
      openApiSysCourseQuery(this.listQuery).then((res) => {
        setTimeout(() => {
          this.tableData = res.data.data
          this.pageObj = res.data
          this.loading = false
        }, 200)
      })
    },
    refreshList(v) {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    },
    refreshListTwo(v) {
      if (v == 1) {
        //最新
        Object.assign(this.listQuery, {
          sortOrder: '',
          recommended: '',
        })
      } else if (v == 2) {
        //最热
        Object.assign(this.listQuery, {
          sortOrder: 'clickNum',
          recommended: '',
        })
      } else {
        //推荐
        Object.assign(this.listQuery, {
          recommended: '1',
          sortOrder: 'recommended',
        })
      }
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss">
.course-list-home {
  padding-bottom: 60px;
  .armsLibrary-wrap {
    margin-top: 30px;
  }
  .course-list-wrap {
    min-height: 500px;
  }
}
</style>